<template>
  <div class="resource">
<!--    添加按钮-->
    <el-button
      type="btn"
      @click="
        dialogVisible = true;
        isEdit = false">
      添加资源</el-button>
<!--表格-->
    <div class="resourceTable">
      <el-table :data="resourceList" border style="width: 100%">
        <el-table-column label="序号" width="150" type="index">
        </el-table-column>
        <el-table-column prop="title" label="资源名称" width="250">
        </el-table-column>
        <el-table-column prop="code" label="提取码" width="250">
        </el-table-column>
        <el-table-column
          prop="url"
          label="资源地址"
          width="330"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              @click="
                updateResource(
                  scope.row.id,
                  scope.row.title,
                  scope.row.code,
                  scope.row.url)"
              type="text"
              size="small">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteResource(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    添加/编辑表单-->
    <div class="form">
      <el-dialog
          :title="formTitle"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <el-form ref="resourceForm" :model="resourceForm" :rules="resourceFormRules" label-width="80px">
          <el-form-item label="资源名称" prop="title">
            <el-input v-model="resourceForm.title"> </el-input>
          </el-form-item>
          <el-form-item label="提取码" prop="code">
            <el-input v-model="resourceForm.code"> </el-input>
          </el-form-item>
          <el-form-item label="资源地址" prop="url">
            <el-input v-model="resourceForm.url"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button
              type="primary"
              @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    return {
      // 控制资源添加/编辑表单的显示与隐藏
      dialogVisible: false,
      // 控制图片预览的显示与隐藏
      dialogImgVisible: false,
      // 是否处于编辑状态
      isEdit: false,
      id: 0,
      // 资源表单
      resourceForm: {
        title: "",
        code: "",
        url: "",
      },
      // 资源表单的验证规则
      resourceFormRules:{
        title:[{required:true,message:"请输入标题",trigger:"blur"}],
        code:[{required:true,message:"请输入提取码",trigger:"blur"}],
        url:[{required:true,message:"请输入资源地址",trigger:"blur"}],
      },
      // 资源列表
      resourceList: [],
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$refs.resourceForm.resetFields();
    },
    //获取资源
    getResourceList() {
      request.get("resource?page=1&total=100").then((res) => {
        if (res.data.code === 20000) {
          this.resourceList = res.data.data;
        } else {
          this.$message.error("获取资源列表错误");
        }
      });
    },
   async onSubmit() {
      if (!this.isEdit) {
        //添加资源
       const {data:res} = await request
          .post("resource", {
            title: this.resourceForm.title,
            code: this.resourceForm.code,
            url: this.resourceForm.url,
          })
        if (res.code === 20000) {
          this.getResourceList();
          this.$message.success("添加资源成功");
        } else {
          this.$message.error("添加资源错误");
        }
      } else {
        request
          .put(`resource/${this.id}`, {
            title: this.resourceForm.title,
            code: this.resourceForm.code,
            url: this.resourceForm.url,
          })
          .then((res) => {
            if (res.data.code === 20000) {
              this.getResourceList();
              this.isEdit = false;
            } else {
              this.$message.error("修改资源错误");
              this.isEdit = false;
            }
          });
      }
     this.dialogVisible = false;
    },

    //删除资源
    deleteResource(id) {
      request.delete(`resource/${id}`).then((res) => {
        if (res.data.code === 20000) {
          this.getResourceList();
        } else {
          this.$message.error("删除资源错误");
        }
      });
    },
    //更新资源
    updateResource(id, title, code, url) {
      this.id = id;
      this.resourceForm.title = title;
      this.resourceForm.code = code;
      this.resourceForm.url = url;
      this.dialogVisible = true;
      this.isEdit = true;
    },
  },
  computed:{
    formTitle(){
      return this.isEdit?"修改资源":"添加资源"
    }
  },
  mounted() {
    this.getResourceList();
  },
  watch: {
    isEdit() {
      if (!this.isEdit) {
        (this.resourceForm.title = ""),
          (this.resourceForm.code = ""),
          (this.resourceForm.url = "");
      }
    },
  },
};
</script>

<style scoped>
.el-table{
  margin-top: 20px;
}
</style>